html, #ng-scope, #map, body {
    margin: 0;
    padding: 0;
    font-family: Verdana, "microsoft yahei";
    font-size: 16px;
    position: relative;
    overflow: hidden;
    height: 100% !important;
}
input, a, b, span, div {
    font-family: "Verdana", "microsoft yahei";
}
.leaflet-popup-content {
    width: auto !important;
}
.leaflet-control-layers-base span, .leaflet-control-layers-overlays span {
    font-size: 12px;
}
.leaflet-container {
    /* background: -webkit-linear-gradient(#fff, #ddd);
    background: -o-linear-gradient(#fff, #ddd);
    background: -moz-linear-gradient(#fff, #ddd);
    background: linear-gradient(#fff, #ddd);*/
    
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    background: #FCF9F2;
    cursor: pointer;
}
#projectTypes:hover {
    color: #fff;
}
#projectTypes .menu .item:hover {
    background-color: #60B5F8 !important;
}
#homeButton {
    -webkit-transition: background-color 0.2s ease-out, color 0.2s ease-out;
    -moz-transition: background-color 0.2s ease-out, color 0.2s ease-out;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
    color: #b2b2b2 !important;
    background-color: #ad4949 !important;
}
#homeButton:hover {
    background-color: #d95c5c !important;
    color: #fff !important;
    /*box-shadow: 0 0 4px 4px #dc6c6c;*/
}
/*override css in semantic*/

.ui.active.bottom.sidebar {
    margin-top: -410px!important;
}
.ui.bottom.sidebar, .ui.top.sidebar {
    height: 410px!important;
}
.ui.menu {
    font-size: 1rem;
}
.ui.inverted.segment {
    background-color: transparent;
    color: #eee;
}
.div-shown {
    animation: shown 1s ease-out;
    -webkit-animation: shown 1s ease-out;
}
.ui.segment.tab-active {
    margin-top: 0;
}
@keyframes shown {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes shown {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes shown {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@media only screen {
    @-ms-viewport {
        width: auto !important;
    }
    ::-webkit-scrollbar {
        width: 0;
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
    }
    ::-webkit-scrollbar-thumb:vertical:hover {
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
    }
}
@media only screen and (max-width: 1080px) {
    .ui.large.modal {
        width: 90%;
        margin-left: -45%;
    }
    .ui.modal>.content {
        padding: 0;
    }
}
.tab-pane {
    display: none;
}
.tab-pane.tab-active {
    display: block;
    animation: shown 1.2s ease-out;
    -webkit-animation: shown 1.2s ease-out;
}
.ui.segment {
    padding: 0;
    margin: 5px 0 0 0;
}
.div-label {
    width: 80px;
    margin-left: -10px;
    margin-top: -10px;
    font-size: 10px;
    color: #444;
}
.point-marker-txt {
    width: 10px;
    margin-left: -5px;
    margin-top: -5px;
    font-size: 0.7rem;
    color: #333;
}
.point-marker {
    -webkit-transition: width 0.4s ease-out, height 0.4s ease-out, box-shadow 0.2s ease-out;
    -moz-transition: width 0.4s ease-out, height 0.4s ease-out, box-shadow 0.2s ease-out;
    transition: width 0.4s ease-out, height 0.4s ease-out, box-shadow 0.2s ease-out;
    border-radius: 10em;
    width: 14px;
    height: 14px;
    margin-left: -8px;
    margin-top: -8px;
    opacity: 0.8;
    border: 1px solid #555;
    animation: shine 0.6s linear 2 alternate;
    -webkit-animation: shine 0.6s linear 2 alternate;
}
.point-marker-normal.point-marker-active {
    box-shadow: 0 0 5px 5px #31a354;
    border: 1px solid #666;
    /*-webkit-animation: normal-shine 1.6s linear infinite;*/
}
.point-marker-alert.point-marker-active {
    box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.8);
    border: 2px solid #cc0000;
    /*-webkit-animation: alert-shine 1.6s linear infinite;*/
}
.point-marker-normal {
    background: #31a354;
}
.point-marker-normal:hover {
    background-color: #4BC971;
    box-shadow: 0 0 5px 5px #31a354;
}
.point-marker-alert {
    background: rgba(255, 0, 0, 0.8);
}
.point-marker-alert:hover {
    background: #FF3C3C;
    box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.8);
}
.map-zoom-0 {
    width: 3px !important;
    height: 3px !important;
    margin-left: -2px;
    margin-top: -2px;
    font-size: 5px;
}
.map-zoom-1 {
    width: 7px !important;
    height: 7px !important;
    margin-left: -4px;
    margin-top: -4.5px;
    font-size: 7px;
}
.map-zoom-2 {
    width: 11px !important;
    height: 11px !important;
    margin-left: -6px;
    margin-top: -6px;
    font-size: 10px;
}
.map-zoom-3 {
    width: 14px !important;
    height: 14px !important;
    margin-left: -8px;
    margin-top: -8px;
    font-size: 10px;
}
@-webkit-keyframes normal-shine {
    0% {
        box-shadow: 0 0 0 0;
    }
    60% {
        box-shadow: 0 0 4px 4px #31a354;
    }
    100% {
        box-shadow: 0 0 0 0;
    }
}
@-webkit-keyframes alert-shine {
    0% {
        box-shadow: 0 0 0 0;
    }
    60% {
        box-shadow: 0 0 4px 4px rgba(255, 0, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0;
    }
}
@keyframes shine {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes shine {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes shine {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}
#close-left-icon:hover {
    border-color: #999;
}
#close-left-icon {
    border-color: #999;
}
#progress {
    position: fixed;
    top: 20%;
    z-index: 10;
    width: 300px;
    margin-left: -150px;
    display: block;
    left: 50%;
    visibility: hidden;
}
#progressBar {
    width: 100%;
    -webkit-transition: width 0.5s linear;
    -moz-transition: width 0.5s linear;
    transition: width 0.5s linear;
    /*    -webkit-animation: performSteps 3s linear infinite;
    -moz-animation: performSteps 3s linear infinite;
    -ms-animation: performSteps 3s linear infinite;*/
}
.progressBar {
    -webkit-animation: performSteps 8s linear;
    -moz-animation: performSteps 8s linear;
    -ms-animation: performSteps 8s linear;
}
@-webkit-keyframes performSteps {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@keyframes performSteps {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@-moz-keyframes performSteps {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
td>a.item {} td, table.ui.table th {} #calendar-top {
    padding: 5px 0;
}
#calendar-top.ui.menu>.item {
    padding: 5px 0;
}
#calendar-head {
    margin-top: 0;
    background-color: #222;
}
#calendar-head .column>.ui.item {
    width: 100%;
}
.ui.grid>.row>.column {
    text-align: center;
}
.valid-day>.ui.label {
    margin: 0.6em;
}
#calendar-day-pane.ui.grid>.row {
    width: 100%;
    margin: 6px 0;
    padding: 0;
}
#calendar-month.ui.grid>.row {
    width: 100%;
    margin: 2px 0;
    padding: 0;
}
#calendar-month {
    width: 100%;
    margin: 0;
}
#calendar-day-pane {
    margin: 0;
    -webkit-animation: shown .4s ease-in;
    -moz-animation: shown .4s ease-in;
    -ms-animation: shown .4s ease-in;
}
.pathMarker:hover {
    fill: #CA2226;
}
.pathMarker {
    fill: #DD393E;
    opacity: 0.9;
}
i.prj-marker.icon {
    margin: 10px 0 0 0;
    color: #E0E0E0;
}
.leaflet-popup-content-wrapper {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.8)
}
#leftBar {
    z-index: 800;
}
.label-h4-txt {
    margin-top: 5px;
    margin-bottom: 5px;
}
.label-h4-txt-disable {
    margin-top: 5px;
    margin-bottom: 5px;
    color: #707070;
}
.map-indicator.label.ui {
    background-color: #008F88 !important;
    /*border: 1px solid #262626 !important;*/
    /*    -webkit-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out;*/
}
.label.inverted.auto-survey-label {
    -webkit-animation: label-color-animtation 4s linear infinite;
    animation: label-color-animtation 4s linear infinite;
}
@-webkit-keyframes label-color-animtation {
    0% {
        background-color: #6B3030;
    }
    40% {
        background-color: #6B3030;
    }
    50% {
        background-color: #D45A5A;
    }
    93% {
        background-color: #D45A5A;
    }
    100% {
        background-color: #6B3030;
    }
}
@keyframes label-color-animtation {
    0% {
        background-color: #6B3030;
    }
    40% {
        background-color: #6B3030;
    }
    50% {
        background-color: #D45A5A;
    }
    93% {
        background-color: #D45A5A;
    }
    100% {
        background-color: #6B3030;
    }
}
@-ms-keyframes label-color-animtation {
    0% {
        background-color: #6B3030;
    }
    40% {
        background-color: #6B3030;
    }
    50% {
        background-color: #D45A5A;
    }
    93% {
        background-color: #D45A5A;
    }
    100% {
        background-color: #6B3030;
    }
}
#autoSurveyMsg {
    font-size: 80px;
}
.auto-point-popup-span {
    font-size: 10px;
    white-space: nowrap;
}
.ui.menu.auto-survey-control {
    border-radius: 0;
    font-size: 0;
}
.ui.menu.auto-survey-control>.item {
    padding: .53em .95em;
}
.ui.menu.auto-survey-control>.item:hover {
    background-color: #5D5D5D;
}
.ui.menu.auto-survey-control>.item:active {
    background-color: #454545;
}
.ui.menu.auto-survey-control>.item {
    background-color: #505050;
}
@media (min-width: 1200px) {
    #singleChartModal.ui.large.modal {
        width: 64%;
        margin-left: -32%;
    }
}
.ui.inverted.menu .header.item {
    background-color: transparent;
}
.ui.label.panaroma {
    position: absolute;
    right: 7px;
    font-size: 11px;
    border: 1px #fff solid !important;
    background-color: #CC3333 !important;
    cursor: pointer;
    color: #ddd;
}
.ui.label.panaroma:hover {
    color: #fff;
    background-color: #F03C3C !important;
}
